<template>
	<div class="personinCharge">
		<div class="personinCharge-box">
	       <span class="personinCharge-box-title" v-if="selectForm.length == 0">负责人</span>
		   <div class="personinCharge-item" v-for="(item,index) in selectForm" v-if="index<1">
			   <span class="personinCharge-item-title">{{ item.label }}</span>
			   <span class="personinCharge-item-subtitlt" v-if="selectForm.length > 1">+ {{selectForm.length -1}}</span>
		   </div>
		   <i class="personinCharge-box-icon el-icon-arrow-down"
		   	:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
	<el-select v-model="selectTitle" ref="select" @visible-change="visibleChange" size="medium" placeholder="协作者">
		<template slot="empty">
			<div class="select">
				<div class="select-search">
					<el-input size="small" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryInput"
						@input="inputClick">
					</el-input>
				</div>
				<div v-for="(group,groupIndex) in options">
					<div class="select-header" @click="groupClick(group)">
						<div class="select-header-left">
							<span class="select-header-title">{{group.label}}</span>
							<i class="task-header-actions-icon el-icon-refresh"
								v-if="inputLoading == true && group.type == true"
								:class="[inputLoading == true?'refreshRe':'']"></i>
							<span class="select-header-number" v-else>({{group.options.length}})</span>
						</div>
						<i class="iconfont icon-xia"
							:class="[group.type==true?'select-header-icon':'select-header-iconTwo']"></i>
					</div>
					<!--多选-->
					<template v-if="group.type == true && selectType == 'multipleChoice'">
						<div :class="[item.type == true?'select-item-choose':'select-item']"
							v-for="(item,index) in group.options" @click="groupItemClick(item,index,groupIndex)">
							<el-image class="select-item-logo" :src="item.logo"></el-image>
							<span class="select-item-title">{{item.label}}</span>
						</div>
					</template>
					<!-- 单选-->
					<template v-if="group.type == true && selectType == 'singleChoice'">
						<div :class="[itemIndex == index && groupIndexs == groupIndex?'select-item-choose':'select-item']"
							v-for="(item,index) in group.options" @click="groupItemClick(item,index,groupIndex)">
							<el-image class="select-item-logo" :src="item.logo"></el-image>
							<span class="select-item-title">{{item.label}}</span>
						</div>
					</template>
				</div>
				<el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
			</div>
		</template>
	</el-select>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					label: '企业成员',
					type: true, //第一项展示
					options: [{
						value: '1',
						label: '黄蓉@测试',
						logo: 'https://img1.baidu.com/it/u=2387955680,644883402&fm=26&fmt=auto',
						type: false
					}, {
						value: '2',
						label: '任盈盈@设计',
						logo: 'https://img2.baidu.com/it/u=1906075380,3894659122&fm=26&fmt=auto',
						type: false
					}, {
						value: '3',
						label: '诺墨同学',
						logo: 'https://img2.baidu.com/it/u=1745604621,3464039072&fm=26&fmt=auto',
						type: false
					}, {
						value: '4',
						label: '潜龙在渊',
						logo: 'https://img1.baidu.com/it/u=2857483951,1440537674&fm=26&fmt=auto',
						type: false
					}, {
						value: '5',
						label: '一路南漂',
						logo: 'https://img1.baidu.com/it/u=3868323278,2697507358&fm=26&fmt=auto',
						type: false
					}]
				}, {
					label: '部门成员',
					type: false,
					options: [{
							value: '6',
							label: '张玲儿@人事',
							logo: 'https://img0.baidu.com/it/u=4047053917,3746960817&fm=26&fmt=auto',
							type: false
						}, {
							value: '7',
							label: '程灵素@运营',
							logo: 'https://img1.baidu.com/it/u=784995757,2934277413&fm=26&fmt=auto',
							type: false
						}, {
							value: '8',
							label: '黄药师@Android',
							logo: 'https://img0.baidu.com/it/u=88688942,1231043856&fm=26&fmt=auto',
							type: false
						}, {
							value: '9',
							label: '木婉清@设计',
							logo: 'https://img2.baidu.com/it/u=2585790349,2589001802&fm=26&fmt=auto',
							type: false
						},
						{
							value: '10',
							label: 'liv',
							logo: 'https://img0.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto',
							type: false
						}
					]
				}],
				selectTitle: '',
				queryInput: '',
				selectType: 'multipleChoice', //singleChoice 单选 multipleChoice 多选,
				inputLoading: false,
				itemIndex: -1,
				groupIndexs: -1,
				selectForm:[]
			}
		},
		methods: {
			groupClick(item) {
				item.type = !item.type
			},
			groupItemClick(item, index, groupIndex) {
				var _this = this
				if (this.selectType == 'multipleChoice') {
					item.type = !item.type
				} else if (this.selectType == 'singleChoice') {
					if (_this.itemIndex == index && _this.groupIndexs == groupIndex) {
						_this.itemIndex = -1
						_this.groupIndexs = -1
						_this.selectForm = []
						_this.selectTitle = ''
					} else {
						_this.itemIndex = index
						_this.groupIndexs = groupIndex
						_this.$refs.select.blur()
						_this.selectTitle = _this.options[groupIndex].options[index].label
						_this.selectForm = []
						_this.selectForm.push(_this.options[groupIndex].options[index])
						_this.$message({
							message: '单选成功',
							type: 'success'
						});
					}
				}
			},
			visibleChange(item) {
				var _this = this
				if (item == false && this.selectType == 'multipleChoice') {
					var data = []
					_this.options.forEach(function(item) {
						if (item.type == true) {
							item.options.forEach(function(items) {
								if (items.type == true) {
									data.push(items)
								}
							})
						}
					})
					if (data.length > 0) {
						_this.selectForm = data
						_this.selectTitle = data[0].label
					}else{
						_this.selectForm = []
						_this.selectTitle = ''
					}
					_this.$message({
						message: '多选成功',
						type: 'success'
					});
				}
			},
			inputClick(data) {
				var _this = this
				if (this.inputLoading == true) {
					return
				}
				this.inputLoading = true
				setTimeout(() => {
					_this.inputLoading = false
				}, 1000);
			}
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-search {
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		box-sizing: border-box;
	}

	.select-header {
		padding: 10px 10px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f6f8;
		flex: 1;
	}

	.select-header-title {
		flex: 1;
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		margin-right: 10px;
		margin-left: 4px;
	}

	.select-header-icon {
		font-size: 12px;
		color: #333333;
		margin-right: 4px;
		transition: all .5s;
		transform: rotate(-180deg);
	}

	.select-header-iconTwo {
		font-size: 12px;
		color: #333333;
		margin-right: 4px;
		transition: all .5s;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
	}

	.select-item-choose {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		background-color: rgba(194, 214, 255, 0.22);
		color: #2c7ef8;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-logo {
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.select-item-title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		margin-left: 10px;
		display: block;
		max-width: 220px;
	}

	.select-header-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.select-header-number {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.task-header-actions-icon {
		border-radius: 4px;
		cursor: pointer;
		color: #909aaa;
		font-size: 14px;
	}

	.refreshRe {
		-webkit-animation: rotate 1.2s linear infinite;
		/*Safari and Chrome*/
	}

	@keyframes rotate {
		0% {

			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			/* IE 9 */
			-moz-transform: rotate(360deg);
			/* Firefox */
			-o-transform: rotate(360deg);
		}

		100% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			/* IE 9 */
			-moz-transform: rotate(0deg);
			/* Firefox */
			-o-transform: rotate(0deg);
		}
	}

	@-webkit-keyframes rotate {
		0% {
			-moz-transform: rotate(360deg);
		}

		100% {
			-moz-transform: rotate(0deg);
		}
	}
	
	/deep/.el-input--medium .el-input__inner {
		background-color: #f5f6f8;
		border-color: #F5F6F8;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/deep/.el-input--medium .el-input__inner:hover {
		background-color: #ecedf0;
	}
	
	/deep/.el-select {
		width: 100%;
	}
	
	.personinCharge {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e47777;
		border-radius: 4px;
		position: relative;
	}
	
	.personinCharge-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		background-color: #f5f6f8;
		padding-left: 6px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
	}
	
	.personinCharge-box-title{
		color: #C0C4CC;
		font-size: 14px;
		font-weight: 500;
		display: block;
		margin-left: 10px;
	}
	
	.transformIcon {
		transform: rotateZ(-180deg);
	}
	
	.transformIconChoose {
		transform: rotateZ(0deg);
	}
	
	.personinCharge-box-icon {
		color: #C0C4CC;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
	}
	
	.personinCharge-item {
		padding: 0px 6px;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* border: 1px solid #e9e9eb; */
		width: 100%;
	}
	
	.personinCharge-item-title {
		flex: 1;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
		color: #606266;
		margin-left: 2px;
	}
	
	.personinCharge-item-subtitlt{
		font-size: 14px;
		color: #606266;
		display: block;
		margin-left: 8px;
		white-space: nowrap;
	}
</style>
